<template>
    <div :id="chartId"></div>
</template>

<script>
    import G2 from "@antv/g2";
    import {
        DataSet
    } from '@antv/data-set';
    export default {
        props: {
            height: {
                type: Number,
                default: 360
            }
        },
        data() {
            return {
                chartId: "chart" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""),
                chartData: [{
                    "continent": "Americas",
                    "Country": "Argentina",
                    "LifeExpectancy": 75.32,
                    "GDP": 12779.37964,
                    "Population": 40301927
                }, {
                    "continent": "Americas",
                    "Country": "Brazil",
                    "LifeExpectancy": 72.39,
                    "GDP": 9065.800825,
                    "Population": 190010647
                }, {
                    "continent": "Americas",
                    "Country": "Canada",
                    "LifeExpectancy": 80.653,
                    "GDP": 36319.23501,
                    "Population": 33390141
                }, {
                    "continent": "Americas",
                    "Country": "Chile",
                    "LifeExpectancy": 78.553,
                    "GDP": 13171.63885,
                    "Population": 16284741
                }, {
                    "continent": "Americas",
                    "Country": "Colombia",
                    "LifeExpectancy": 72.889,
                    "GDP": 7006.580419,
                    "Population": 44227550
                }, {
                    "continent": "Americas",
                    "Country": "Costa Rica",
                    "LifeExpectancy": 78.782,
                    "GDP": 9645.06142,
                    "Population": 4133884
                }, {
                    "continent": "Americas",
                    "Country": "Cuba",
                    "LifeExpectancy": 78.273,
                    "GDP": 8948.102923,
                    "Population": 11416987
                }, {
                    "continent": "Americas",
                    "Country": "Dominican Republic",
                    "LifeExpectancy": 72.235,
                    "GDP": 6025.374752,
                    "Population": 9319622
                }, {
                    "continent": "Americas",
                    "Country": "Ecuador",
                    "LifeExpectancy": 74.994,
                    "GDP": 6873.262326,
                    "Population": 13755680
                }, {
                    "continent": "Americas",
                    "Country": "El Salvador",
                    "LifeExpectancy": 71.878,
                    "GDP": 5728.353514,
                    "Population": 6939688
                }, {
                    "continent": "Americas",
                    "Country": "Guatemala",
                    "LifeExpectancy": 70.259,
                    "GDP": 5186.050003,
                    "Population": 12572928
                }, {
                    "continent": "Americas",
                    "Country": "Honduras",
                    "LifeExpectancy": 70.198,
                    "GDP": 3548.330846,
                    "Population": 7483763
                }, {
                    "continent": "Americas",
                    "Country": "Jamaica",
                    "LifeExpectancy": 72.567,
                    "GDP": 7320.880262,
                    "Population": 2780132
                }, {
                    "continent": "Americas",
                    "Country": "Mexico",
                    "LifeExpectancy": 76.195,
                    "GDP": 11977.57496,
                    "Population": 108700891
                }, {
                    "continent": "Americas",
                    "Country": "Nicaragua",
                    "LifeExpectancy": 72.899,
                    "GDP": 2749.320965,
                    "Population": 5675356
                }, {
                    "continent": "Americas",
                    "Country": "Panama",
                    "LifeExpectancy": 75.537,
                    "GDP": 9809.185636,
                    "Population": 3242173
                }, {
                    "continent": "Americas",
                    "Country": "Paraguay",
                    "LifeExpectancy": 71.752,
                    "GDP": 4172.838464,
                    "Population": 6667147
                }, {
                    "continent": "Americas",
                    "Country": "Peru",
                    "LifeExpectancy": 71.421,
                    "GDP": 7408.905561,
                    "Population": 28674757
                }, {
                    "continent": "Americas",
                    "Country": "Puerto Rico",
                    "LifeExpectancy": 78.746,
                    "GDP": 19328.70901,
                    "Population": 3942491
                }, {
                    "continent": "Americas",
                    "Country": "Trinidad and Tobago",
                    "LifeExpectancy": 69.819,
                    "GDP": 18008.50924,
                    "Population": 1056608
                }, {
                    "continent": "Americas",
                    "Country": "United States",
                    "LifeExpectancy": 78.242,
                    "GDP": 42951.65309,
                    "Population": 301139947
                }, {
                    "continent": "Americas",
                    "Country": "Uruguay",
                    "LifeExpectancy": 76.384,
                    "GDP": 10611.46299,
                    "Population": 3447496
                }, {
                    "continent": "Americas",
                    "Country": "Venezuela",
                    "LifeExpectancy": 73.747,
                    "GDP": 11415.80569,
                    "Population": 26084662
                }, {
                    "continent": "Asia",
                    "Country": "China",
                    "LifeExpectancy": 72.961,
                    "GDP": 4959.114854,
                    "Population": 1318683096
                }, {
                    "continent": "Asia",
                    "Country": "Hong Kong, China",
                    "LifeExpectancy": 82.208,
                    "GDP": 39724.97867,
                    "Population": 6980412
                }, {
                    "continent": "Asia",
                    "Country": "Japan",
                    "LifeExpectancy": 82.603,
                    "GDP": 31656.06806,
                    "Population": 127467972
                }, {
                    "continent": "Asia",
                    "Country": "Korea, Dem. Rep.",
                    "LifeExpectancy": 67.297,
                    "GDP": 1593.06548,
                    "Population": 23301725
                }, {
                    "continent": "Asia",
                    "Country": "Korea, Rep.",
                    "LifeExpectancy": 78.623,
                    "GDP": 23348.13973,
                    "Population": 49044790
                }, {
                    "continent": "Europe",
                    "Country": "Albania",
                    "LifeExpectancy": 76.423,
                    "GDP": 5937.029526,
                    "Population": 3600523
                }, {
                    "continent": "Europe",
                    "Country": "Austria",
                    "LifeExpectancy": 79.829,
                    "GDP": 36126.4927,
                    "Population": 8199783
                }, {
                    "continent": "Europe",
                    "Country": "Belgium",
                    "LifeExpectancy": 79.441,
                    "GDP": 33692.60508,
                    "Population": 10392226
                }, {
                    "continent": "Europe",
                    "Country": "Bosnia and Herzegovina",
                    "LifeExpectancy": 74.852,
                    "GDP": 7446.298803,
                    "Population": 4552198
                }, {
                    "continent": "Europe",
                    "Country": "Bulgaria",
                    "LifeExpectancy": 73.005,
                    "GDP": 10680.79282,
                    "Population": 7322858
                }, {
                    "continent": "Europe",
                    "Country": "Croatia",
                    "LifeExpectancy": 75.748,
                    "GDP": 14619.22272,
                    "Population": 4493312
                }, {
                    "continent": "Europe",
                    "Country": "Czech Republic",
                    "LifeExpectancy": 76.486,
                    "GDP": 22833.30851,
                    "Population": 10228744
                }, {
                    "continent": "Europe",
                    "Country": "Denmark",
                    "LifeExpectancy": 78.332,
                    "GDP": 35278.41874,
                    "Population": 5468120
                }, {
                    "continent": "Europe",
                    "Country": "Finland",
                    "LifeExpectancy": 79.313,
                    "GDP": 33207.0844,
                    "Population": 5238460
                }, {
                    "continent": "Europe",
                    "Country": "France",
                    "LifeExpectancy": 80.657,
                    "GDP": 30470.0167,
                    "Population": 61083916
                }, {
                    "continent": "Europe",
                    "Country": "Germany",
                    "LifeExpectancy": 79.406,
                    "GDP": 32170.37442,
                    "Population": 82400996
                }, {
                    "continent": "Europe",
                    "Country": "Greece",
                    "LifeExpectancy": 79.483,
                    "GDP": 27538.41188,
                    "Population": 10706290
                }, {
                    "continent": "Europe",
                    "Country": "Hungary",
                    "LifeExpectancy": 73.338,
                    "GDP": 18008.94444,
                    "Population": 9956108
                }, {
                    "continent": "Europe",
                    "Country": "Iceland",
                    "LifeExpectancy": 81.757,
                    "GDP": 36180.78919,
                    "Population": 301931
                }, {
                    "continent": "Europe",
                    "Country": "Ireland",
                    "LifeExpectancy": 78.885,
                    "GDP": 40675.99635,
                    "Population": 4109086
                }, {
                    "continent": "Europe",
                    "Country": "Italy",
                    "LifeExpectancy": 80.546,
                    "GDP": 28569.7197,
                    "Population": 58147733
                }, {
                    "continent": "Europe",
                    "Country": "Montenegro",
                    "LifeExpectancy": 74.543,
                    "GDP": 9253.896111,
                    "Population": 684736
                }, {
                    "continent": "Europe",
                    "Country": "Netherlands",
                    "LifeExpectancy": 79.762,
                    "GDP": 36797.93332,
                    "Population": 16570613
                }, {
                    "continent": "Europe",
                    "Country": "Norway",
                    "LifeExpectancy": 80.196,
                    "GDP": 49357.19017,
                    "Population": 4627926
                }, {
                    "continent": "Europe",
                    "Country": "Poland",
                    "LifeExpectancy": 75.563,
                    "GDP": 15389.92468,
                    "Population": 38518241
                }, {
                    "continent": "Europe",
                    "Country": "Portugal",
                    "LifeExpectancy": 78.098,
                    "GDP": 20509.64777,
                    "Population": 10642836
                }, {
                    "continent": "Europe",
                    "Country": "Romania",
                    "LifeExpectancy": 72.476,
                    "GDP": 10808.47561,
                    "Population": 22276056
                }, {
                    "continent": "Europe",
                    "Country": "Serbia",
                    "LifeExpectancy": 74.002,
                    "GDP": 9786.534714,
                    "Population": 10150265
                }, {
                    "continent": "Europe",
                    "Country": "Slovak Republic",
                    "LifeExpectancy": 74.663,
                    "GDP": 18678.31435,
                    "Population": 5447502
                }, {
                    "continent": "Europe",
                    "Country": "Slovenia",
                    "LifeExpectancy": 77.926,
                    "GDP": 25768.25759,
                    "Population": 2009245
                }, {
                    "continent": "Europe",
                    "Country": "Spain",
                    "LifeExpectancy": 80.941,
                    "GDP": 28821.0637,
                    "Population": 40448191
                }, {
                    "continent": "Europe",
                    "Country": "Sweden",
                    "LifeExpectancy": 80.884,
                    "GDP": 33859.74835,
                    "Population": 9031088
                }, {
                    "continent": "Europe",
                    "Country": "Switzerland",
                    "LifeExpectancy": 81.701,
                    "GDP": 37506.41907,
                    "Population": 7554661
                }, {
                    "continent": "Europe",
                    "Country": "Turkey",
                    "LifeExpectancy": 71.777,
                    "GDP": 8458.276384,
                    "Population": 71158647
                }, {
                    "continent": "Europe",
                    "Country": "United Kingdom",
                    "LifeExpectancy": 79.425,
                    "GDP": 33203.26128,
                    "Population": 60776238
                }, {
                    "continent": "Oceania",
                    "Country": "Australia",
                    "LifeExpectancy": 81.235,
                    "GDP": 34435.36744,
                    "Population": 20434176
                }, {
                    "continent": "Oceania",
                    "Country": "New Zealand",
                    "LifeExpectancy": 80.204,
                    "GDP": 25185.00911,
                    "Population": 4115771
                }],
            }
        },
        mounted() {
            this.createChart(this.chartId, this.chartData);
        },
        methods: {
            createChart(container, data) {

                var _G = G2,
                    Global = _G.Global;

                var colorMap = {
                    'Asia': Global.colors[0],
                    'Americas': Global.colors[1],
                    'Europe': Global.colors[2],
                    'Oceania': Global.colors[3]
                };
                let chart = new G2.Chart({
                    container: container,
                    forceFit: true,
                    height: this.height,
                    padding: [50, 50, 80, 50],
                    background: {
                        fill: "#fff"
                    }
                })
                chart.source(data);
                chart.scale({
                    LifeExpectancy: {
                        alias: '人均寿命（年）'
                    },
                    Population: {
                        type: 'pow',
                        alias: '人口总数'
                    },
                    GDP: {
                        alias: '人均国内生产总值($)'
                    },
                    Country: {
                        alias: '国家/地区'
                    }
                });
                chart.axis('GDP', {
                    label: {
                        formatter(value) {
                            return (value / 1000).toFixed(0) + 'k';
                        }
                    }
                });
                chart.tooltip({
                    showTitle: false
                });
                chart.legend('Population', false); // 该图表默认会生成多个图例，设置不展示 Population 和 Country 两个维度的图例
                chart.point().position('GDP*LifeExpectancy').size('Population', [4, 65]).color('continent',
                    function (val) {
                        return colorMap[val];
                    }).shape('circle').tooltip('Country*Population*GDP*LifeExpectancy').style(
                    'continent', {
                        lineWidth: 1,
                        strokeOpacity: 1,
                        fillOpacity: 0.3,
                        opacity: 0.65,
                        stroke(val) {
                            return colorMap[val];
                        }
                    });
                chart.render();

            },
        }
    }
</script>